<template>
    <div class='form'>
        <div v-for="(list2,index2) in listnew" :key="index2" class='rows'>
            <div class='form_item' v-for="(item,index) in list2" :key="index">
                <div class='brs'  v-if="item.type=='title'">
                        <form-title :id="item.id" :title="dataNew[item.id]" :label="item.label"></form-title>
                </div>
                    
                        
                    <input-view :id="item.id"  :isreadonly="item.isReadOnly" v-if="item.type=='text'&&dataNew.show[item.id]!='Y'"  :index="item.index"  :data="dataNew" :isRequired="item.required" @input="changeData" :appid="appid" :exkey="item.exkey" :extype="item.extype"></input-view>
                        
                    
                    
                    <image-view-item-ytj :heights="item.height" v-if="item.type=='imageViewItem'"  :isreadonly="item.isReadOnly"  :id="item.id" :data="dataNew" index=""  @input="changeData" :appid="appid" :label="item.label"></image-view-item-ytj>
                       
                    <div style='clear:both;width:100%;height:15px' class='brs' v-if="item.type=='br'"><br/></div>
                </div>
        </div>
            
    </div>
</template>
<script>
import Vue  from 'vue'
import InputView  from '../../components/input/InputView'
import ImageView  from '../../components/image/ImageView'
import ImageViewItemYtj  from './ImageViewItemYtj'
export default {
    props:['list','data','rules','appid','w'],
    name: "ytj-form",
    components: { 
       
        InputView,
        ImageView,
        ImageViewItemYtj,
       
    },
    data(){
        
        return{
            formInline:{},
            dataNew:this.data,
            rule:{},
            listnew:[],
            isMobile:"N"
        }
    },
    created(){
        
        
        //is-required
        
        if(localStorage.getItem("ismobile")=="Y"){
            this.isMobile="Y";
        }
        this.initList();
        
    },
     watch:{
        
        /*list:{
            handler: function (newVal) {
                // console.log("data===================================================")
                this.initList()
            },      
            deep: true    //深度监听
        }*/
    },
    mounted(){
        let el=document.getElementsByClassName("brs");
        for(let i=0;i<el.length;i++){
            el[i].parentNode.style.display="block";
        }
        for(let key in this.rule){
            let el=document.querySelector("div[flag='"+key+"']");
            try{
                el.classList.add("required")
            }catch(e){}
        }
    },
    
    methods:{
        initList(){//主要是为了解决各个屏幕不一样，然后显示的界面不是一个正的形状
            if(!this.dataNew.show){
                this.dataNew.show={}
            }
        
            for(let i=0;i<this.rules.length;i++){
                let name=this.rules[i].name;
                let rule_=this.rules[i].rule;
                let rule__=[];
                rule__.push(rule_);
                this.rule[name]=rule__;
            }
            this.listnew=[];
            try{
                let maxWidth=600;
                try{
                    maxWidth=this.$parent.$el.clientWidth;
                }catch(e){console.log("cuow=1="+e.message)}
                if(maxWidth==0){
                    maxWidth=this.$parent.$parent.$parent.$el.clientWidth;
                }
                if(maxWidth==0){
                    let width=document.documentElement.clientWidth*0.95;
                    let w=this.w;
                    if(w.indexOf("%")){
                        w=Number(this.w.replace("%",""))/100;
                        maxWidth=width*w;
                        console.log("w==="+w+"==="+maxWidth);
                    }else{
                        maxWidth=w;
                    }
                }
                let list_=[];
                let index=0; 
                //重新定义一个变量，为了变更这个变量的时候，this.list的值可以保持初始值
                let list__=[];
                for(let i=0;i<this.list.length;i++){
                    list__.push(this.list[i])
                }
                console.log("maxWidth------------------------------------"+maxWidth+"="+document.documentElement.clientWidth);
                let indexs=0;
                //开始循环字段列表，这个列表在循环里面会慢慢的被清掉
                while(list__.length>0){
                    let type=list__[0].type;
                    let label=list__[0].label;
                    let labelWidth=list__[0].labelWidth.replace("px","").replace(";","");
                    let width=list__[0].width.replace("px","").replace("width:","").replace(";","");
                    let labelWidth_=list__.length>1 ? list__[1].labelWidth.replace("px","").replace(";",""):"0";
                    let width_=list__.length>1 ?list__[1].width.replace("px","").replace("width:","").replace(";",""):"0";
                    labelWidth=Number(labelWidth);
                    width=Number(width);
                   // labelWdidth_=Number(labelWidth_);
                    width_=Number(width_);
                    let exwidth=10;
                    if(type=='checkbox'||type=="checkbox_simple"){
                        exwidth=0

                    }else if(type=="imageViewItem"){
                        width=350;
                    }
                    //console.log("label=="+label+"="+index+"="+labelWidth+"="+width+"="+maxWidth+"=1="+this.$parent.$parent.$parent.$el.clientWidth);
                    
                    //所有的隐藏域不显示控件
                    if(type!='hidden'){
                        //如果加上当前控件宽度大于了card的宽度，并且把当前控件和下一个控件换位置也大于了card的宽度，则换行
                        if(((index+width+exwidth>maxWidth)&&(index+width_+exwidth>maxWidth))||type=='br'){
                            let list2=[];
                            for(let i=0;i<list_.length;i++){
                                list2.push(list_[i])
                            } 
                            this.listnew.push(list2);//添加一行
                            indexs++;
                        
                            list_=[];
                            index=0; //当前行总宽设置为0
                        //如果加上当前控件宽度大于了card的宽度，但把当前控件和下一个控件换位置小于了card的宽度，则把下一个位置控件加入当前行然后换行
                        }else if((index+width+exwidth>maxWidth)&&(index+width_+exwidth<=maxWidth)&&labelWidth_>0&&width_>0){
                            list_.push(list__[1]);//加入下一个位置控件
                            let list2=[];
                            for(let i=0;i<list_.length;i++){
                                list2.push(list_[i])
                            }
                            this.listnew.push(list2);
                            indexs++;
                            list_=[];
                            index=0;
                            list__.splice(1,1);
                        //不加这个else if 会显示出错
                        }else if(((index+width+exwidth>maxWidth))){
                            let list2=[];
                            for(let i=0;i<list_.length;i++){
                                list2.push(list_[i])
                            }
                            this.listnew.push(list2);
                            indexs++;
                        
                            list_=[];
                            index=0; 
                        }
                        if(type!="br"){
                            list_.push(list__[0]);
                            index+=width+exwidth;
                        }
                    }
                    
                
                    list__.splice(0,1);
                }
                if(list_.length>0){
                    this.listnew.push(list_);
                }
                if(this.isMobile=="Y"){
                    window.setTimeout(function(){
                        let els=document.getElementsByClassName("form_item_item");
                        for(let i=0;i<els.length;i++){
                            els[i].style.width=(maxWidth-60)+"px";
                        }
                    },1000)
                }
                
            }catch(e){}
            
        },
        getDatas(id){
            let ids=id.split(".");
            let p=ids[0];
            let id_=ids[1];
            return this.dataNew[p][id_];

        },
        changeData(data){
            let datas=JSON.parse(data);
            let id=datas.id;
            let val=datas.val;
            let ids=id.split(".");
            let p=ids[0];
            let id_=ids[1];

            try{
                if(datas.index!=undefined)
                    this.dataNew[p][datas.index][id_]=val; 
                else{
                    this.dataNew[p][id_]=val;
                }
            }catch(e){}
            
            let data_={};
            data_.pre=p;
            data_.id=id_;
            data_.val=val;
            data_.index=datas.index;//用于行号
            console.log("dataInput========================================================")
            this.$emit("input",JSON.stringify(data_));
        },
        funeralItemSelectEvent(data){//给殡仪服务特殊用的
            console.log("特殊给殡仪服务用-------------------------");
            console.log(data)
            this.$emit("funeralItemSelectEvent",data);
        },
        setData(data){
            this.dataNew=data;
        },
        validate(){
           try{
                let msg="";
                for(let key in this.rule){
                    try{
                       
                        let r_=this.rule[key];
                        let ids=key.split(".");
                        let p=ids[0];
                        let id_=ids[1];
                        let val=this.dataNew[p][id_];
                        //console.log(p+"="+id_+"=="+val)
                        if(val==""){
                            msg=r_[0].message;
                            document.getElementById(key).style.border="1px solid red"
                            break;
                        }else{
                            document.getElementById(key).style.border="1px solid #C0C4CC"
                        }
                    }catch(e){
                        
                    }
                    
                }
                return msg;
           }catch(e){
               return "";
           }
           
    
        }
    }
}
</script>
<style scoped>
    /*form{
        display:flex;
        flex-direction: row;
        display: -webkit-flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        align-items:flex-start;
    }*/
    .rows{
       
    }
    .form_item{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
       vertical-align: middle;
       text-align:center;

       
       
    }
    .form_item_item{
       height:30px;
    }
    .el-checkbox{
        margin-left:10px;
    }
    .el-checkbox__label{
        padding-left:5px;
    }
    .el-form-item{
        margin-bottom:1px;
        width:100%;
        display:flex;
        flex-direction: row;
    }
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
        margin-bottom: 1px;
        display:flex;
        flex-direction: row;
    }
   .el-input__inner:hover{
       border-color:cornflowerblue;
   }
   .el-form-item__content{
       flex:1;
   }
   
</style>
<style >
    .el-form-item__label{
        padding:0 5px 0 0  !important;
    }
    .required .el-form-item__label::before{
          content: "*";
        color: #f56c6c;
        margin-right: 4px;
   }
.el-form--inline .el-form-item__content{
       flex:1;
   }
</style>